<template>
    <div>
        <!-- 内容 -->
        <div class="content">
            <div class="titleClass" @click="() => { projectListshow = !projectListshow }">
                <div>{{ monitorKey }}</div>
                <img style="margin:9px 12px 10px 11px;width:14px;height:6px;"
                    src="../../../assets/images/Vector 830.png">
            </div>
            <div class="contentClass" style="height: 225px;margin-top: 16px;" v-if="videoConfig.url.length">
                <EZUIKit style="width: 100%;height: 225px;" :config="videoConfig">
                </EZUIKit>
            </div>
            <div v-else style="color:#fff;text-align: center;height: 30px;line-height: 30px;font-size: 14px;">
                暂无监控信息</div>
        </div>
        <van-popup v-model:show="projectListshow" position="bottom" :style="{ height: '50%' }">
            <van-picker show-toolbar title="切换监控" v-model="selectedValues"
                :columns="monitoringVideoList.map(item => { return { text: item.channelName, value: item.id, url: item.url } })"
                @cancel="() => { projectListshow = false }" @confirm="updateProject" />
            <template #overlay-content></template>
        </van-popup>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { PorjectHT_MonitorGetProjectMonitor, } from "@/api";
import { useAppStore } from "../../../store";
import EZUIKit from "../../../components/EZUIKit/index.vue";
export default defineComponent({
    components: {
        EZUIKit
    },
    setup() {
        const { userInfo, projectInfo, projectList, baseUrl } = useAppStore();
        const monitorKey = ref("--");
        const Url = ref("");
        const videoConfig = ref({ url: '', id: '6', token: '' })
        const projectListshow = ref(false)
        const monitoringVideoList = ref([])
        const selectedValues = ref([])
        const updateProject = ({ selectedValues, selectedOptions }) => {
            projectListshow.value = false;
            var data = monitoringVideoList.value.filter(item => item.id == selectedValues[0])[0]
            selectedValues.value = selectedValues;
            monitorKey.value = data.channelName;
            localStorage.setItem("selectedMonitoring", JSON.stringify(selectedValues));
            Url.value = data.url
            videoConfig.value = {
                url: Url.value,
                id: data.id,
                token: data.token
            }

        }
        const getData = async () => {
            const res = await PorjectHT_MonitorGetProjectMonitor({
                projectId: projectInfo.id,
                type: 2,
                current: "",
                linkId: ""
            });
            if (res.data) {
                monitoringVideoList.value = res.data ?? [];
                if (localStorage.getItem("selectedMonitoring") != null && res.data.some(item => item.id == JSON.parse(localStorage.getItem("selectedMonitoring")))) {
                    var data = res.data.filter(item => item.id == JSON.parse(localStorage.getItem("selectedMonitoring")))[0]
                    selectedValues.value = [data.id];
                    monitorKey.value = data.channelName;
                    Url.value = data.url
                    videoConfig.value = {
                        url: Url.value,
                        id: data.id,
                        token: data.token
                    }
                } else {
                    res.data.length ? monitorKey.value = res.data[0].channelName : '--';
                    res.data.length ? Url.value = res.data[0].url : '--';
                    res.data.length ? videoConfig.value = {
                        url: res.data[0].url,
                        id: res.data[0].id,
                        token: res.data[0].token
                    } : ''
                }

            }
        }
        onMounted(() => {
            getData()

        });


        return {
            monitorKey,
            projectListshow,
            projectInfo,
            projectList,
            Url,
            baseUrl,
            monitoringVideoList,
            updateProject,
            videoConfig,
            selectedValues
        };
    },
});
</script>

<style lang="less" scoped>
.content {
    width: 100%;
    height: 100%;
    overflow: auto;
    scrollbar-width: none // 隐藏滚动条样式
}

.titleClass {
    height: 72px;
    width: 100%;
    font-size: 32px;
    padding-left: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: url('../../../assets/images/Group 1000004723.png') no-repeat;
    background-size: 100% 100%;
}

.contentClass {
    display: flex;
    justify-content: start;
    padding: 10px;
    width: 100%;
    flex-direction: column;
    background: url('../../../assets/images/地图组.png') no-repeat;
    background-size: 100% 100%;
}
</style>